<template>
    <div class="info"  >
        <div class="info_content">
            <section class="shop_go border-1px">
                <h3 class="shop_title">配送信息</h3>
                <div class="shop_text">
                    <span style="background:deepskyblue;margin-right:20px;border-radius:4px ">{{info.description}}</span>
                    <span>有商家配送提供配送，约{{info.deliveryTime}}送达，距离{{info.distance}}</span>
                </div>
                <div class="shop_text">配送费￥{{info.deliveryPrice}}</div>
            </section>

            <div class="split" ></div>

            <section class="shop_discount">
                <div class="title">活动与服务</div>
                <div class="item" v-for="(value,index) in info.supports" :key="index">
                    <div class="l_item" :style="{background:colorArr[value.type]}">{{value.name}}</div>
                    <div>{{value.content}}</div>
                </div>
            </section>

            <div class="split" ></div>

            <section class="shop_pic">
                <div class="title">商家实景</div>
                <div class="pic_box">
                    <ul class="pic_content" ref="pic_content">
                        <li v-for="(pic,index) in info.pics"><img :src="pic" alt=""></li>
                    </ul>
                </div>
            </section>
            <div class="split" ></div>
            <section class="shop_info">
                <div class="title">商家信息</div>
                <div class="lei border-1px">品类 <span>{{info.category}}</span></div>
                <div class="lei border-1px">商家电话 <span>{{info.phone}}</span></div>
                <div class="lei border-1px">地址 <span>{{info.address}}</span></div>
                <div class="lei border-1px">营业时间 <span>{{info.workTime}}</span></div>
            </section>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import BScroll from 'better-scroll'
    export default {
        name: "ShopInfo",
        computed:{
            ...mapState(['info'])
        },
        watch:{
            info(){  //  执行刷新操作
                // 计算ul的宽度
                // this.$nextTick(()=>{
                //    this._initScroll()
                // });
                this._initScroll()
            }
        },
        data(){
          return {
              colorArr:['green','lightsalmon','orange']
          }
        },
        methods:{
            stopTouch(e){
                e.stopPropagation(e) //阻止touchstart事件冒泡
            },
            _initScroll(){
                new BScroll(document.getElementsByClassName("info")[0],{
                    click:true,
                    touchmove:true
                });
                const ul=this.$refs.pic_content;
                const count=this.info.pics.length;
                ul.style.width=count*(3.3)+"rem";
                new BScroll(document.getElementsByClassName("pic_box")[0],{
                    click:true,
                    scrollX:true
                });
                console.log("监听到info你变换")
            }
        },
        mounted(){
            if(!this.info.pics){
                //return false
                console.log("已经开始异步，还没有同步得到info")
            }else{
                this._initScroll()  // 从别的组件调过来的，info 早就在shop组件里面就获取了..
            }
            // console.log(this.info,"嘿嘿");
            // this._initScroll()


        }
    }
</script>

<style lang="stylus" scoped>
 @import '../../../assets/mixin.styl'
.info
    position:absolute
    top:4rem
    left:0
    right:0
    bottom:0
    background:#fff
    overflow:hidden
    .info_content
        .shop_go
            padding:0.3rem 0.4rem
            bottom-border-1px(#ccc)
            //background:green

            .shop_title
                font-size:0.4rem
                font-weight:600
                height:0.6rem
                line-height:0.6rem
            .shop_text
                //background:red
                padding-top:0.2rem
                font-size:0.3rem
                line-height:0.4rem

        .shop_discount //折扣
            padding:0.3rem 0.4rem
            .title
                font-size:0.4rem
                font-weight :600
            .item
                font-size: 0.3rem
                display:flex
                height:0.6rem
                line-height:0.6rem
                align-items:center
                .l_item
                    font-size:0.28rem
                    font-weight :600rem
                    height:0.4rem
                    line-height:0.4rem
                    border-radius:0.06rem
                    padding:0 0.1rem
                    margin-right: 0.2rem
                    color:#fff
        .shop_pic
            padding:0.3rem 0.4rem
            .title
                font-size:0.4rem
                font-weight:600
            .pic_box
                width: 100%
                margin-top:0.2em
                overflow:hidden
                .pic_content //ul
                    overflow:hidden
                    li
                        width:3.2rem
                        height:2.4rem
                        float:left
                        margin-right:0.1rem
                        //border:1px solid red
                        img
                            display:block
                            width: 100%
                            height:100%

        .shop_info
            font-size: 0.3rem
            padding:0.3rem 0.4rem
            .title
                font-size:0.4rem
                font-weight:600
            .lei
                font-weight:500
                height:0.6rem
                line-height:0.6rem
                bottom-border-1px(#ccc)
                span
                    float:right
                    color:rgba(66,66,66,0.7)


 .split
    height: 0.4rem
    background:rgba(88,88,88,0.2)

</style>
